<template>
  <swiper class="swiper" 
    circular 
    :indicator-dots="false" 
    :autoplay="true" 
    :interval="3000" 
    :duration="500"
    v-if="list.length"
  >
    <swiper-item
      v-for="(swiperItem, swiperIndex) in list" 
      :key="swiperIndex"
    >
      <view class="w-center flex-sb-center">
        <view class="w-332rpx daily-bs flex-sb-center box-border p-24rpx mt-16rpx mb-16rpx rounded-30rpx bg-white" 
          :class="[
            { 'dark-color2 daily-bs-dark': themeConfig.theme === 'dark' }
          ]"
          v-for="item in swiperItem" 
          :key="item.id"
          @click="handleClick(item)"
        >
          <base-img-box :size="112" :round="112" :imgSrc="getInfoVo(item).personAvatar.preUrl" :thumbnailPreUrl="getInfoVo(item).personAvatar.thumbnailPreUrl" />
          <view class="" style="width: calc( 100% - 134rpx );">
            <view class="w-full mt-4rpx font-size-28rpx ellipsis">
              {{ getInfoVo(item).userProfileInfoVo.nickname || '--' }}
            </view>
            <wd-text 
              :text="`年龄：${calculateAge(getInfoVo(item).userProfileInfoVo.birthYearMonth) || '--'}`" 
              :color="themeConfig.theme === 'dark' ? '#C7B8FD' : '#21003D'" 
              :lines="1"
              size="20rpx"
            ></wd-text>
            <wd-text 
              :text="`职业：${getInfoVo(item).userProfileInfoVo.professionName || '--'}`" 
              :color="themeConfig.theme === 'dark' ? '#C7B8FD' : '#21003D'" 
              size="20rpx" 
              :lines="1"
            ></wd-text>
            <view class="flex-a-center mt-4rpx color-#9C6DEF">
              <i class="iconfont icon-frame font-size-24rpx"
                :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
              ></i>
              <wd-text 
                :text="`${getInfoVo(item).userProfileInfoVo.cityName || '-'}${getInfoVo(item).userProfileInfoVo.districtName || '-'}`" 
                :color="themeConfig.theme === 'dark' ? '#C7B8FD' : '#21003D'" 
                size="20rpx" 
                :lines="1"
              ></wd-text>
            </view>
          </view>
        </view>
      </view>
    </swiper-item>
  </swiper>
  
  <view class="w-center flex-sb-center" v-if="status === 'loading' || !list.length">
    <view class="w-332rpx daily-bs flex-sb-center box-border p-24rpx mt-16rpx mb-16rpx rounded-30rpx bg-white" 
      :class="[
        { 'dark-color2 daily-bs-dark': themeConfig.theme === 'dark' }
      ]"
      v-for="item in 2" 
      :key="item"
    >
      <!-- 骨架屏 - 加载中 -->
      <view class="w-center flex">
        <wd-skeleton animation="gradient" :row-col="[{ size: '112rpx', type: 'circle' }]" />
        <wd-skeleton 
          animation="gradient" 
          :custom-style="{ width: '100%', marginLeft: '12px' }" 
          :row-col="[{ width: '60%' }, { width: '100%' }]" 
        />
      </view>
    </view>
  </view>

  <!-- <wd-status-tip 
    image="content" 
    v-if="['finished', 'error'].includes(status) && !list.length" 
    :image-size="{
      height: 100,
      width: 100
    }"
  /> -->
</template>

<script lang="ts" setup>
import { GetDailyRecommendationUserInfoPage } from "@/service/db_user";
import { useThemeStore, useUserStore } from "@/store";
import { calculateAge, chunkArray } from "@/utils";
import baseImgBox from "@/components/base/base-img-box.vue";

const { themeConfig } = useThemeStore();
const user = useUserStore();

const list = ref([]);
const status = ref('normal');
const getList = async () => {
  try {
    if (['loading', 'finished'].includes(status.value)) return;
    status.value = 'loading';
    const res = await GetDailyRecommendationUserInfoPage({
      userId: user.userInfo.id
    })
    const _list = res.data || [];
    list.value = chunkArray(_list, 2);
    status.value = 'finished';
  } catch (error) {
    status.value = 'error';
    console.log(error)
  }
}

const getInfoVo = computed(() => {
  return (item) => {
    const userProfileInfoVo = item.userProfileInfoVo || {};
    const personAvatar = item.personAvatar || {};
    return {
      userProfileInfoVo,
      personAvatar
    }
  }
})

const handleClick = (item) => {
  if (!user.isLogined) {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  uni.navigateTo({ 
    url: `/activity/userDetail?id=${item.id}`
  })
}

const reLoadList = () => {
  status.value = 'normal';
  getList();
}

onMounted(() => {
  reLoadList();
})

defineExpose({
  getList,
  reLoadList
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
.light-color {
  color: #21003D;
}

.daily-bs {
  display: inline-flex;
  box-shadow: 0 8rpx 8rpx 0 #D3D3D340;
}

.daily-bs-dark {
  box-shadow: 0 8rpx 8rpx 0 #d3d3d300;
}

uni-swiper, swiper {
  height: 220rpx !important;
}
</style>
